<docs>
  ## 信息变更服务
</docs>
<template>
  <div class="fixedBox">
    <mheader type="index" @back_btn="goBack()" title="信息变更服务"></mheader>
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <!-- 级联 -->
        <div class="picker" ref="picker">
          <label class="input-label" for>居住地址</label>
          <span id="trigger1" class="_input">{{xghlxdzxzmc}}</span>
        </div>
        <co-area prop="xghjzdz" label="详细地址" v-model="data.xghjzdz" placeholder="请输入"></co-area>
        <co-input prop="xghjzdyb" label="居住地邮编" max-length="10" v-model="data.xghjzdyb" placeholder="请输入"></co-input>
        <co-input
          prop="xghylsjhm"
          label="预留手机号"
          v-model="data.xghylsjhm"
          @input="changePhone"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix _dxyz">
          <co-input
            style="width:63%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="data.sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:35%;margin-top:0.24rem;"
            class="left btn btn-primary"
            @click="get_yzm"
            :disabled="disabled"
          >{{yzmCode}}</button>
        </div>
      </co-form>
    </div>
    <!-- 下一步 开始 -->
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">提交</button>
    </div>
    <!-- 手机校验 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type=='success' ? 'success' : (save.type=='email'?'email':'fail')">
      <div class="_iphone">
        <co-input
          label="手机号"
          v-model="sjhm"
          @input="changePhone2"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix">
          <co-input
            style="width:70%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:30%;margin-top:0.25rem;"
            class="left btn btn-primary"
            @click="get_yzm2"
            :disabled="disabled"
          >{{yzmCode1}}</button>
        </div>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import coArea from "@/base/form/textarea";
import MessageCard from "@/ldry/group/messageCard/messageCard";
import $ from "common/js/axios";
import { validator } from "common/js/valid";
import { mixinValid } from "common/mixins/mixins";
import PickerExtend from "picker-extend"; //行政区划插件

export default {
  components: { coForm, coInput, coSelect, Mheader, coArea, MessageCard },
  name: "reverseOne",
  mixins: [mixinValid],
  data() {
    return {
      yzmCode1: "获取验证码",
      yzmDisabled:true,
      disabled: true,
      sjhm:"",
      sjyzm:"",
      save: {
        type: "email",
        btnText: "确定",
        btnType: "primary",
        title: "手机验证",
        visible: true
      },
      msgTitle: "",
      xghlxdzxzmc: "请选择", //行政区划名称
      quVisible: true,
      data: {
        sjyzm: "", //手机验证码
        xghjzdz: "", //详细地址
        xghjzdxzqh: "", //行政区划
        xghylsjhm: "", //手机号码
        xghjzdyb: "" //邮编
      },
      yzmCode: "获取验证码",
      disabled: true,
      yzmDisabled:true,
      oldSyhm:'',
      rules: {
        xghjzdz: validator('64,"full","详细地址",false'),
        xghylsjhm: validator('11,"sjh","手机号码",false'),
        xghjzdyb: validator('6,"number","邮编",false'),
        sjyzm: validator('4,"number","验证码",false')
      },
      positionArr: []
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    changePhone(){
      let _old = this.oldSyhm;
      let _new = this.data.xghylsjhm;
      if(_new == _old){
         this.disabled=true;
        this.yzmDisabled=true;
      }else{
        this.disabled=false;
        this.yzmDisabled=false;
      }
    },
    // 第二次获取验证码
    get_yzm() {
      this.own(this.data.xghylsjhm)
    },
    // 第一次获取验证码
    get_yzm2() {
      this.own(this.sjhm,1)
    },
    own(data,txt){
      var exc = /^1\d{10}$/;
      if (!exc.test(data)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      var _flag = 1
      if(_flag != 1) return
      $.get("/dafwgl/personal/fsdx", {
        params: {
          ylsjh: data,
          code:'1'
        }
      })
        .then(res => {
          _flag = 0
          let _res = res.returnData;
          if (+_res.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
          this.timeout(txt);
        })
        .finally();
    },
    timeout(txt) {
      let count = 60;
      let _this = this;
      _this.disabled = true;
      var countdown = setInterval(function() {
        if (txt) {
          _this.yzmCode1 = count + "s";
        }else{
          _this.yzmCode = count + "s";
        }
        if (count == 0) {
          if (txt) {
            _this.yzmCode1 = "发送验证码"
          }else{
            _this.yzmCode = "发送验证码";
          }
          _this.disabled = false;
          clearInterval(countdown);
        }
        count--;
      }, 1000);
    },
    yzsjh() {
      this.$loading = true;
      var _this = this
      $.post("/dafwgl/jbxx/xxxgBc", this.data)
        .then(res => {
        this.$loading = false;
        let _res = res.returnData;
          if (+_res.executeResult == 1) {
            this.$alert({
              type: "success",
              message: "操作成功！",
              cb:function(){
                _this.$router.push({ name: "xxbgxxbg" });
              }
            });
          } else {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
      });
    },
    // 下一步操作
    nextStep() {
      this.$refs.form.validate(() => {
        if (!this.data.xghjzdxzqh) {
          this.$alert({
            type: "warning",
            message: "居住地址不能为空！"
          });
        }
        this.yzsjh();
      });
      // this.$router.push({ name: "index" });
    },
    get_xzqh() {
      $.get("static/bjs4j.json").then(res => {
        this.jygzList = res;
        let posiArr = this.randerPosition(this.jygzList, this.data.xghjzdxzqh);
        this.xzqh(this.jygzList, posiArr);
      });
    },
    randerPosition(all, tarid) {
      let _tarid = tarid || "110000000000";
      let _arr = [];
      let _item1 = _tarid.substring(0, 3) + "000000000";
      let _item2 = _tarid.substring(0, 6) + "000000";
      let _item3 = _tarid.substring(0, 9) + "000";
      let _item4 = _tarid;
      this.dgArr(all, _item1);
      this.dgArr(all, _item2);
      this.dgArr(all, _item3);
      this.dgArr(all, _item4);
      return this.positionArr;
    },
    dgArr(all, str) {
      all.forEach((item, index) => {
        if (item.id == str) {
          this.positionArr.push(index);
          return;
        } else if (item.children) {
          this.dgArr(item.children, str);
        }
      });
    },
    xzqh(jygzList, posi) {
      var _this = this;
      var _position = posi || [0, 0, 0, 0];
      var pickerExtend = new PickerExtend({
        trigger: "#trigger1",
        title: "居住地址",
        wheels: [{ data: jygzList }],
        keyMap: {
          id: "id",
          value: "name",
          childs: "children"
        },
        // flexibleHeight: "80",
        connector: "",
        position: _position,
        callback: function(indexArr, res) {
          let _data = res.pop();
          _this.xghlxdzxzmc = _data.name;
          _this.data.xghjzdxzqh = _data.id;
        }
      });
    },
    xxxg() {
      $.get("/dafwgl/personal/xxxg")
        .then(res => {
          let _res = res.returnData;
          if (+_res.executeResult == 1) {
            let _data = _res.grxx;
            this.data.xghjzdxzqh = _data.xzqhId;
            this.xghlxdzxzmc = _data.jzdxzqh || "请选择";
            this.data.xghjzdz = _data.jzdz; //详细地址
            this.data.xghjzdyb = _data.jzdyb; //邮编
            if(_data.ylsjh){ //手机号码
              this.data.xghylsjhm = _data.ylsjh;
              this.oldSyhm = _data.ylsjh;
            }else{
              this.data.xghylsjhm =_res.grxx.ylsjh;
              this.oldSyhm = _res.grxx.ylsjh;
            }
            this.$nextTick(() => {
              this.get_xzqh();
            });
          } else {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
        })
        .finally();
    },
    // 输入手机校验预留手机方法
    changePhone2(){
      if (this.sjhm.length < 11) return
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      $.post('/dafwgl/personal/checkSjh',{ylsjh: this.sjhm}).then((res) => {
        var data = res.returnData;
        if (data.executeResult == '0') {
          this.$alert({
            type: "warning",
            message: data.message
          });
          return;
        }else{
          this.disabled = false;
          this.yzmDisabled = false;
         }
      }).catch(() => {});
    },
    // 消息按钮点击处理
    msgBtn() {
      if(this.save.type == 'email'){
        if (this.sjyzm == "") {
          this.$alert({
            type: "warning",
            message: "验证码不能为空!"
          });
          return
        }
        if (this.sjyzm.length < "4") {
          this.$alert({
            type: "warning",
            message: "验证码长度必须是4位!"
          });
          return
        }
        let _data = {
          ylsjh:this.sjhm,
          sjyzm:this.sjyzm
        }
        var _flag = 1
        if(_flag != 1) return
        $.post('/dafwgl/personal/checkSjyzm',_data).then((res) => {
          _flag = 0
          var data = res.returnData;
          if (data.executeResult == '0') {
            this.$alert({
              type: "warning",
              message: data.message
            });
            return;
          }else if (data.executeResult == '1'){
            this.save.visible = false;
            this.yzmCode = "发送验证码";
            this.yzmCode1 = "发送验证码";
          }
        }).catch(() => {});
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      if (this.save.type == "email") {
        this.$router.push({ name: "xxbgxxbg" });
      }
    },
  },
  mounted() {
    this.xxxg();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.choice {
  border: $border;
  padding-left: $padding-base;
  background-color: #fff;
  border: $border;
}
.next-step {
  margin-top: $margin-base * 5;
  width: 100%;
  box-sizing: border-box;
  padding: $padding-base;
  .btn {
    width: 100%;
  }
}
.picker {
  position: relative;
  display: flex;
  align-items: center;
  display: flex;
  border-bottom: 1px solid #dbdbdb;
  .input-label {
    flex: 0 1 83%;
    font-size: 0.44444rem;
    color: #333;
    padding: 0.0463rem 0;
  }
  ._input {
    text-align: right;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.59259rem 0.88889rem 0.59259rem 0.44444rem;
    font-size: 0.38889rem;
    line-height: 1;
    color: #666;
    background-color: #fff;
    line-height: 1.3;
    background-clip: padding-box;
  }
}
._dxyz .form-group .input-label{
  flex: 1 1 60% !important;
}
</style>
